<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upvote!</title>
    
    <link rel="stylesheet"
        href="../public/bulma/0.9.4/css/bulma.css">
    <link rel="stylesheet"
        href="../public/fontaswsome/6.2.0/css/all.css">
    <link rel="stylesheet"
        href="../public/style.css">

</head>
<body>
    <div id="app">
        <h2 class="title has-text-centered dividing-header">UpVote!</h2>
        <div class="section">
            <article class="media" v-for="submission in sortedSubmissions" 
                v-bind:key="submission.id"
                v-bind:class="{'blue-border': submission.votes >= 20}">
                <submission-component
                    v-bind:submission="submission"
                    v-bind:submissions="sortedSubmissions"
                >

                </submission-component>
            </article>
        </div>
    </div>

    <script src="../public/vue/vue_2.7.14.js"></script>
    <script src="./seed.js"></script>
    <script src="./main.js"></script>
</body>
</html>